<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文章分类</title>
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css"/>
    <link rel="stylesheet" href="/ztree/css/metroStyle/metroStyle.css"/>
    <script src="/ztree/js/jquery.ztree.all.min.js"></script>
</head>
<style>
    body{
        background-color: #F1F1F1;
    }
</style>
<body>
    <div>
        <ul id="treeDemo" class="ztree"></ul>
        <div style="width: 110px; float: right; margin-right: 30px;">
            <input type="button" class="layui-btn layui-btn-normal layui-btn-sm" onclick="sub()" value="确定" />
            <input type="button" class="layui-btn layui-btn-warm layui-btn-sm" onclick="cancel()" value="取消"/>
        </div>
    </div>
    <input name="acticleCategroyId" class="layui-input" type="text" style="display: none;"/>
    <input name="artcleCategroyName" class="layui-input" type="text" style="display: none;"/>
</body>
<!--<script src="/js/MicroCircle/article-classification.js"></script>-->
<script>
    var form;
    var $;
    var table;
    var layer;
    var upload;
    var node;
    var user = JSON.parse(localStorage.getItem("user"));
    var userId = user.userId;

    $(document).click(function(){//子页面
        $(".rightmenu",window.parent.document).hide();
    });

    layui.use(['form','jquery','table','layer','upload'],function() {
        form = layui.form;
        $ = layui.jquery;
        table = layui.table;
        layer = layui.layer;
        upload = layui.upload;

        //展示树节点
        getJsActicleCategroy();
    })

    function getJsActicleCategroy() {
        $.ajax({
            url:'/microcircle/getJsActicleCategroy',
            type: "post",
            dataType:'json',
            data: {},
            success:function (data) {
                showZtree(data.data);
            }
        });
    }

    function showZtree(data) {
        var setting = {
            data:{
                simpleData: {
                    enable: true,  //true 、 false 分别表示 使用 、 不使用 简单数据模式
                    idKey: "acticleCategroyId",  //节点数据中保存唯一标识的属性名称
                    pIdKey: "parentId",    //节点数据中保存其父节点唯一标识的属性名称
                    rootPId: -1  //用于修正根节点父节点数据，即 pIdKey 指定的属性值
                },
                key: {
                    name: "artcleCategroyName"  //zTree 节点数据保存节点名称的属性名称  默认值："name"
                }
            },
            check: {
                enable: true,
                chkStyle: "checkbox",
                //radioType: "all"
            },
            view:{
                showLine: true,
                showIcon:false,
            },
            callback:{
                beforeCheck : function zTreeBeforeClick(treeId, treeNode, clickFlag) {
                    var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                    zTree.checkAllNodes(false);
                    return !treeNode.isParent;//当是父节点 返回false 不让选取
                },
                onCheck: choose, //点击选择分类
            }
        };

        function choose(event,treeId,treeNode){
            //parent.$("input[name=acticleCategroyId]").val(treeNode.acticleCategroyId);
            $("input[name=acticleCategroyId]").val(treeNode.acticleCategroyId);
            $("input[name=artcleCategroyName]").val(treeNode.artcleCategroyName);
        }

        //初始化ztree
        zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, data );
        zTreeObj.expandAll(true);//展开全部节点

        //节点回显（默认显示）
        if ($("input[name=acticleCategroyId]",window.parent.document).val()) {
            var node = zTreeObj.getNodeByParam("acticleCategroyId",$("input[name=acticleCategroyId]",window.parent.document).val(),null);
            zTreeObj.checkNode(node,true,true);
        }
    }

    //确定
    function sub() {
        var acticleCategroyId = $("input[name=acticleCategroyId]").val();
        var artcleCategroyName = $("input[name=artcleCategroyName]").val();
        parent.$("input[name=acticleCategroyId]").val(acticleCategroyId);
        parent.$("input[name=artcleCategroyName]").val(artcleCategroyName);
        var layer = parent.layer;
        layer.close(layer.index);
    }

    //取消
    function cancel() {
        var layer = parent.layer;
        layer.close(layer.index);
    }
</script>
</html>